<script setup lang="ts">
import Processor from 'windicss'
const processor = new Processor()
let classNames = 'bg-gray-200 font-bold md:font-medium'
let outputStyle = ref()
buildStyle()
function buildStyle() {
  if (classNames.match(/[^:\(-+@]$/)) {
    outputStyle.value = processor.interpret(classNames).styleSheet.build()
  }
}
</script>

<template>
  <main>
    <textarea cols="30" rows="10" @keyup="buildStyle" :value="classNames" />
    <textarea readonly cols="30" rows="10" :value="outputStyle" />
  </main>
</template>

<style>
main {
  width: 100%;
  height: 100%;
  display: flex;
}
textarea {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  width: 50%;
  border-radius: 0.5rem;
}
textarea:focus {
  outline-color: #93c5fd;
}
@media (max-width: 768px) {
  main {
    flex-direction: column;
  }
  textarea {
    width: 100%;
  }
}
</style>
